<template>
  <view class="content">
    <!-- 收货地址部分 -->
    <view class="conaddress">
      <view class="address-title">收货地址</view>
      <view class="address-details">仓前区良睦路2888号梦想小镇2号楼10号</view>
      <view class="message">
        <view class="contact-name">小兰</view>
        <view class="contact-phone">13456789009</view>
      </view>
    </view>
    
    <!-- 订单详情部分 -->
    <view class="order">
      <view class="supermarket-name">{{ supermarketName }}</view>
      <view v-for="(item, index) in selectedItems" :key="index" class="order-item">
        <view class="item-image">
          <img class="product-img" :src="item.imgUrl" :alt="item.name">
        </view>
        <view class="item-message">
          <view class="item-name">{{ item.name }}</view>
          <view class="item-price">单价: ￥{{ item.price.toFixed(2) }}</view>
          <view class="item-quantity">数量: {{ item.quantity }}</view>
          <view class="item-subtotal">小计: ￥{{ (item.price * item.quantity).toFixed(2) }}</view>
        </view>
      </view>
      
      <!-- 总价显示 -->
      <view class="total-price">总价: ￥{{ calculateTotalPrice().toFixed(2) }}</view>
      
      <!-- 立即支付按钮 -->
      <button @click="pay" class="pay-button">立即支付</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      supermarketName: ''
    };
  },
  onLoad() {
    const selectedItemsData = uni.getStorageSync('selectedCheckoutItems');
    if (selectedItemsData) {
      try {
        this.selectedItems = JSON.parse(selectedItemsData);
        if (this.selectedItems.length > 0) {
          this.supermarketName = this.selectedItems[0].shopName;
        }
      } catch (error) {
        console.error('解析商品信息失败', error);
      }
    }
  },
  methods: {
    calculateTotalPrice() {
      return this.selectedItems.reduce((total, item) => {
        return total + item.price * item.quantity;
      }, 0);
    },
    pay() {
      uni.showModal({
        title: '提示',
        content: '确定要支付吗？',
        confirmText: "确认支付",
        cancelText: "取消订单",
        success: (res) => {
          if (res.confirm) {
            const orderData = {
              items: this.selectedItems,
              totalPrice: this.calculateTotalPrice(),
              shopName: this.supermarketName
            };

            uni.navigateTo({
              url: `/pages/orders/pay?data=${encodeURIComponent(JSON.stringify(orderData))}`
            });
          }
        }
      });
    },
    clearCheckedItems() {
      const cartData = uni.getStorageSync('cartlist');
      if (cartData) {
        try {
          let cartlist = JSON.parse(cartData);
          const shopId = this.selectedItems[0].shopId;
          cartlist = cartlist.filter(item => {
            return item.shopId!== shopId ||!item.selected;
          });
          uni.setStorageSync('cartlist', JSON.stringify(cartlist));
        } catch (error) {
          console.error('清除购物车失败', error);
        }
      }
    }
  },
};
</script>

<style scoped>
/* 通用图片样式 */
img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* 商品图片样式 */
.product-img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #f0f0f0;
}

/* 整体内容样式 */
.content {
  background-color: #f4f4f4;
  padding: 15px;
  min-height: 100vh;
}

/* 收货地址样式 */
.conaddress {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.address-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.address-details {
  font-size: 15px;
  margin-bottom: 8px;
  color: #555;
}

.message {
  display: flex;
  align-items: center;
  color: #777;
  font-size: 14px;
}

.contact-name {
  margin-right: 15px;
}

/* 订单详情样式 */
.order {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.supermarket-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.order-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 0;
}

.item-image {
  margin-right: 15px;
}

.item-message {
  flex: 1;
}

.item-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.item-price,
.item-quantity,
.item-subtotal {
  font-size: 14px;
  color: #666;
  margin-bottom: 3px;
}

/* 总价样式 */
.total-price {
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  margin-top: 15px;
  color: #1aad19;
}

/* 立即支付按钮样式 */
.pay-button {
  background-color: #1aad19;
  color: white;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  width: 100%;
}

.pay-button:active {
  background-color: #179116;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .product-img {
    width: 60px;
    height: 60px;
  }
  
  .item-name {
    font-size: 15px;
  }
  
  .item-price,
  .item-quantity,
  .item-subtotal {
    font-size: 13px;
  }
  
  .total-price {
    font-size: 17px;
  }
  
  .pay-button {
    font-size: 15px;
    padding: 10px;
  }
}
</style>